<template>
  <div id="mapContainer"></div>
</template>

<script lang="ts" setup>
import waterN from "@/assets/images/texture/waterNormals.jpg"
import { onMounted } from 'vue';
import mapConfig from "@/assets/config/mapConfig.json"

let viewer: any = undefined;
onMounted(() => {
  let mapViewer = new window.vis3d.MapViewer(
    "mapContainer",
    mapConfig
  );
  viewer = mapViewer._viewer;
  window.vis3d.util.flyTo({
    "center": [121.480207, 29.792675, 190.8],
    "heading": 196.1,
    "pitch": -49,
    "roll": 359.9,
  }, viewer)

  initWater('./public/data/json/hedao_nei.json')
  initWater('./public/data/json/hedao_wai.json')

});

let primitives = [];
const initWater = (url: any) => {
  Cesium.GeoJsonDataSource.load(url).then((dataSource: any) => {
    addWater(dataSource.entities.values, 16)
  
    // }, 100)
  }).catch((error: any) => {
    console.error(error);
  })
}

const addWater = (entities: any, height: any) => {
  for (var i = 0; i < entities.length; i++) {
    const entity = entities[i];
    const arr = getPositions(entity);

    //水效果
    const polygon = new Cesium.PolygonGeometry({
      height: height || 15,
      extrudedHeight: 1,
      polygonHierarchy: new Cesium.PolygonHierarchy(arr),
    });

    const primitive = _addWaterPrimitive(viewer, new Cesium.GeometryInstance({ geometry: polygon }));
    primitive.initHeight = height || 15;
    primitives.push(primitive);
  }


}
const getPositions = (entity: any) => {
  var arr = entity.polygon.hierarchy._value;
  if (arr.positions && isArray(arr.positions))
    return arr.positions;
  return arr;
}
const isArray = (obj: any) => {
  return (typeof obj == 'object') && obj.constructor == Array;
}

var glsl$1 = `
in vec3 v_positionMC;
in vec3 v_positionEC;
in vec2 v_st;
void main(){
  czm_materialInput materialInput;
  vec3 normalEC=normalize(czm_normal3D*czm_geodeticSurfaceNormal(v_positionMC,vec3(0.0),vec3(1.0)));\n
  #ifdef FACE_FORWARD\n
  normalEC=faceforward(normalEC,vec3(0.0,0.0,1.0),-normalEC);\n
  #endif\n
  materialInput.s=v_st.s;
  materialInput.st=v_st;
  materialInput.str=vec3(v_st,0.0);
  materialInput.normalEC=normalEC;
  materialInput.tangentToEyeMatrix=czm_eastNorthUpToEyeCoordinates(v_positionMC,materialInput.normalEC);
  vec3 positionToEyeEC=-v_positionEC;
  materialInput.positionToEyeEC=positionToEyeEC;
  czm_material material=czm_getMaterial(materialInput);\n
  #ifdef FLAT\n
  out_FragColor=vec4(material.diffuse+material.emission,material.alpha);\n
  #else\n
  out_FragColor=czm_phong(normalize(positionToEyeEC),material,czm_lightDirectionEC);
  out_FragColor.a=0.5;\n#endif\n}
`;

const _addWaterPrimitive = (viewer: any, geometryInstance: any, waterParam = {}) => {
  const color = waterParam.color || "#006ab4";
  const waterPrimitive = viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: geometryInstance,
    appearance: new Cesium.EllipsoidSurfaceAppearance({
      aboveGround: false,
      material: new Cesium.Material({
        fabric: {
          type: 'Water',
          uniforms: {
            normalMap: waterN,
            frequency: waterParam.frequency || 1000.0,
            animationSpeed: waterParam.animationSpeed || 0.01,
            amplitude: waterParam.amplitude || 5.0,
            specularIntensity: waterParam.specularIntensity || 0.9,
            baseWaterColor: Cesium.Color.fromCssColorString(color),
            blendColor: Cesium.Color.fromCssColorString("#00badd") //从水中混合到非水域时使用的rgba颜色对象。
          }
        }
      }),
      fragmentShaderSource: glsl$1
    }),
    show: true
  }));
  return waterPrimitive;
}

// 修改水面高度
const updateHeight = (height) => {  
  var eRadis = 6378137;
  for (var i = 0; i < primitives.length; i++) {
    var primitive = primitives[i];
    var n = (eRadis + height) / (eRadis + primitive.initHeight);
    var modelMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(n, n, n));
    primitive.modelMatrix = modelMatrix;
  }
}

</script>